<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 以借助 script 标签直接通过 CDN 来使用 Vue： -->
    <script src="./JS/vue.global.js"></script>
    <style>
      .basic {
        width: 200px;
        height: 200px;
      }
      .happy {
        background-color: blue;
      }
      .sad {
        background-color: red;
      }
      .normal {
        background-color: yellow;
      }
      .atguigu1 {
        background-color: blueviolet;
      }
      .atguigu2 {
        height: 150px;
      }
      .atguigu3 {
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 绑定class样式 -->
      <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
      <div class="basic" :class="arr">{{name}}</div>
      <!-- 绑定style -->
      <div class="basic" :style="styleObj">{{name}}</div>
    </div>

    <script>
      Vue.createApp({
        data() {
          return {
            name: "文本",
            mood: "normal",
            arr: ["atguigu1", "atguigu2", "atguigu3"],
            styleObj: {
              fontSize: "40px",
              color: "red",
            },
          };
        },

        computed: {},
        methods: {
          changeMood() {
            const arr = ["happy", "sad", "normal"];
            const index = Math.floor(Math.random() * 3);
            this.mood = arr[index];
          },
        },
        watch: {},
      }).mount("#app");
    </script>
  </body>
</html>
